<template>
    <div v-if="!disabled" class="btn-item" @click="close">
      <svg-icon name="摄像头开启" color="#fff"></svg-icon>
    </div>
    <div v-else class="btn-item" @click="open">
      <svg-icon name="摄像头关闭" color="#fff"></svg-icon>
    </div>
    </template>
    <script setup >
      const props=defineProps({
     disabled:{
        type:Boolean,
        default:false
     }

  })
  
  const emit=defineEmits(['open','close'])
  function open(){
    emit('open')
  }
  function close(){
    emit('close')
  }
    </script>
    
    <style scoped lang="scss">
  .btn-item{
    width: 50px;
    height: 50px;
background-color:rgba(255,255,255,0.25);
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
&:hover{
    background-color:rgba(255,255,255,0.2) ;
}
}
  
    </style>
    